<template>
<footer class="app-footer">

<div class="footer-content">
  <el-row :gutter="40">
    <!-- 公司信息 -->
    <el-col :xs="24" :sm="12" :md="6" :lg="6">
      <div class="footer-section">
        <div class="logo-container">
          <img src="@/assets/logo.png" alt="logo" class="footer-logo">
          <span class="site-name">智慧教培</span>
        </div>
        <p class="footer-description">
          专业的教育平台与培训平台<br>
          助力职业发展，提升专业技能
        </p>
      </div>
    </el-col>

    <!-- 快速链接 -->
    <el-col :xs="24" :sm="12" :md="6" :lg="6">
      <div class="footer-section">
        <h4 class="section-title">快速链接</h4>
        <ul class="link-list">
          <li v-for="(link, index) in quickLinks" :key="index">
            <router-link :to="link.path" class="footer-link">
              <el-icon>
                <ArrowRight />
              </el-icon>
              {{ link.title }}
            </router-link>
          </li>
        </ul>
      </div>
    </el-col>

    <!-- 联系方式 -->
    <el-col :xs="24" :sm="12" :md="6" :lg="6">
      <div class="footer-section">
        <h4 class="section-title">联系我们</h4>
        <ul class="contact-list">
          <li>
            <el-icon>
              <Location />
            </el-icon>
            北京市海淀区知春路1号
          </li>
          <li>
            <el-icon>
              <Phone />
            </el-icon>
            客服电话：400-800-1234
          </li>
          <li>
            <el-icon>
              <Message />
            </el-icon>
            电子邮箱：support@exam.com
          </li>
        </ul>
      </div>
    </el-col>

    <!-- 社交媒体 -->
    <el-col :xs="24" :sm="12" :md="6" :lg="6">
      <div class="footer-section">
        <h4 class="section-title">关注我们</h4>
        <div class="social-links">
          <a v-for="(social, index) in socialMedia" :key="index" :href="social.link" class="social-icon"
            :style="{ backgroundColor: social.color }">
            <el-icon :size="20">
              <component :is="social.icon" />
            </el-icon>
          </a>
        </div>
        <div class="qrcode-container">
          <el-image src="/images/wechat-qrcode.png" class="qrcode" :preview-src-list="['/images/wechat-qrcode.png']">
            <template #placeholder>
              <div class="qrcode-placeholder">微信扫码关注</div>
            </template>
          </el-image>
        </div>
      </div>
    </el-col>
  </el-row>
</div>

<!-- 版权信息 -->
<div class="copyright">
  <el-divider border-style="hidden" />
  <p>
    © 2025 智慧教培 版权所有
    <el-divider direction="vertical" />
    京ICP备 12345678号-1
    <el-divider direction="vertical" />
    <a href="#" class="beian-link">
      京公网安备 110000000001号
    </a>
  </p>
</div>
<!-- 新增悬浮粒子装饰 -->
<div class="particles">
  <div v-for="i in 30" :key="i" class="particle"></div>
</div>
</footer>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ArrowRight,
  Location,
  Phone,
  Message,
  Camera,
  VideoCamera,
  VideoCameraFilled,
  Platform,

} from '@element-plus/icons-vue'
// 页脚数据
const quickLinks = ref([
  { title: '关于我们', path: '/about' },
  { title: '考试规范', path: '/rules' },
  { title: '隐私政策', path: '/privacy' },
  { title: '常见问题', path: '/faq' },
  { title: '服务条款', path: '/terms' }
])

const socialMedia = ref([
  { icon: Camera, link: '#', color: '#67C23A' },
  { icon: VideoCamera, link: '#', color: '#409EFF' },
  { icon: VideoCameraFilled, link: '#', color: '#E6162D' },
  { icon: Platform, link: '#', color: '#0084FF' }
])
</script>

<style lang="scss" scoped>
@use '@/assets/scss/variables' as *;
@use "sass:math"; // 必须添加 math 模块导入
// 页脚样式 start
.app-footer {
  color: #fff;
  padding: 40px 0 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
      rgba(44, 62, 80, 1) 0%,
      rgba(52, 73, 94, 1) 30%,
      rgba(58, 84, 107, 1) 100%);
  // 粒子动画
  .particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;

    .particle {
      position: absolute;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      animation: float 15s infinite linear;
      filter: blur(1px);

      @for $i from 1 through 30 {
        &:nth-child(#{$i}) {
          $size: math.random(3) + 1px;
          width: $size;
          height: $size;
          top: math.random(100) * 1%;
          left: math.random(100) * 1%;
          $delay: math.random(15);
          animation-delay: $delay * -1s;
          animation-duration: 10 + math.random(15) + s;
        }
      }
    }
  }

  .footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .footer-section {
    margin-bottom: 30px;
    padding: 0 15px;
    position: relative;
    z-index: 2;

    .logo-container {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .footer-logo {
        width: 40px;
        height: 40px;
        margin-right: 12px;
        transition: transform 0.3s ease;

        &:hover {
          transform: rotate(-15deg) scale(1.1);
        }
      }

      .site-name {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 1px;
      }
    }

    .footer-description {
      color: rgba(255, 255, 255, 0.8);
      line-height: 1.6;
      font-size: 14px;
    }

    .section-title {
      position: relative;
      font-size: 18px;
      margin-bottom: 20px;
      padding-bottom: 10px;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 2px;
        background: $primary-color;
      }
    }

    .link-list {
      list-style: none;
      padding: 0;

      li {
        margin-bottom: 12px;

        .footer-link {
          color: rgba(255, 255, 255, 0.8);
          display: flex;
          align-items: center;
          transition: all 0.3s ease;

          .el-icon {
            margin-right: 8px;
            font-size: 12px;
          }

          &:hover {
            color: $primary-color;
            transform: translateX(5px);
          }
        }
      }
    }

    .contact-list {
      list-style: none;
      padding: 0;

      li {
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;

        .el-icon {
          margin-right: 10px;
          font-size: 16px;
          color: $primary-color;
        }
      }
    }

    .social-links {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;

      .social-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
      }
    }

    .qrcode-container {
      .qrcode {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.1);

        &-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.6);
          font-size: 12px;
        }
      }
    }
  }

  .copyright {
    text-align: center;
    padding: 20px 0;
    background: rgba(0, 0, 0, 0.1);
    font-size: 14px;

    p {
      margin: 0;
      color: rgba(255, 255, 255, 0.6);
    }

    .beian-link {
      color: rgba(255, 255, 255, 0.6);
      transition: color 0.3s;

      &:hover {
        color: $primary-color;
      }
    }

    .el-divider {
      background-color: rgba(255, 255, 255, 0.1);
    }
  }
}


// 新增动画
@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(-1000px) translateX(500px);
    opacity: 0;
  }
}

// 页脚样式 end

</style>